<template>
  <div class="dy-dt">
    <van-nav-bar fixed placeholder z-index="99" :border="false">
      <template #left>
        <van-icon name="arrow-left" size="18" />
        <van-image width="30" height="30" :src="url" round />
        <span>用户昵称</span>
      </template>
      <template #right>
        <van-button round type="primary" size="small">关注</van-button>
      </template>
    </van-nav-bar>

    <!-- 内容区域 -->
    <main>
      <div>
        <van-grid :border="false" :column-num="3" :center="false">
          <van-grid-item v-for="item in 10" :key="item">
            <van-image :src="url" fit="comtain" />
          </van-grid-item>
        </van-grid>
      </div>
      <div class="dt-title dt-mb-10">【种草】沙克就是卡卡急啊卡手机卡就是卡卡数据库就卡手机卡就</div>
      <div class="dt-text dt-mb-10">
        正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
      </div>

      <div class="dt-tag dt-mb-10">
        <van-tag type="success" round>标签</van-tag>
        <van-tag type="success" round>标签</van-tag>
        <van-tag type="success" round>标签</van-tag>
        <van-tag type="success" round>标签</van-tag>
      </div>
      <span>2022-03-23</span>
      <div>
        <comment-back></comment-back>
      </div>
    </main>
  </div>
</template>

<script setup>
import CommentBack from './components/commentBack';
import { ref } from '@vue/reactivity';

let url = ref('https://img.yzcdn.cn/vant/cat.jpeg')
</script>

<style scoped lang='scss'>
.dt-mb-10{
  margin-bottom: 10px;
}
.dy-dt {
  padding: 15px 10px;
  ::v-deep .van-grid-item__content{
    padding-top: 0px;
  };
  .dt-title{
    font-size: 13px;
  }
  .dt-text{
    color: #666666;
  }
}
</style>